Access to the Web is relatively open and available to users across a variety of different platforms using a variety of different devices. Designing intuitive, usable, and aesthetically pleasing websites is an important part of Web development projects. The graphical layout of a Web page presents applications, graphics, and other information in such a way that is not only pleasing and natural to the eye of the user but also operates to efficiently convey the information or experience that the website designer intends to convey. Access to the Web is relatively open and available to users across a variety of different platforms using a variety of different devices. However, websites are typically designed with a specific display size and resolution in mind. These websites will be displayed as intended when displayed on devices that have the size and resolution of that it has been designed for (i.e., the “design dimension”). For all other sizes and resolutions, the visual presentation will be changed.
When displaying a website at a resolution higher than the design dimension resolution, straight scaling is generally used, in which the various display objects are up-sampled to generate the larger image, for example, using linear or bicubic interpolation. However, up-scaling tends to blur edges thus, detracting from the appearance of the website. When displaying a website at a resolution lower than the resolution that the website was designed for, scaling is again typically used, in which the display objects are down-sampled to remove image data in order to reduce the size of objects. Reduction typically produces better results. However, when such scaling is performed by the web browser, the results are limited. Furthermore, because the target resolution is generally unknown when the designer develops the website at the design dimension resolution, the reduced-resolution may result in odd-sized lines which distort the appearance of the website.
Another consequence of displaying websites at resolutions different than the design dimension resolution is the organization of the web objects and images. Designers expend a great deal of effort to design precise distances between various objects and images and selecting font sizes that are optimal for readability. When displayed at resolutions different than the design dimension resolution, the distances between the various objects begin to move and scaled fonts may become difficult to read. If the width of the website becomes larger than the viewable screen space, horizontal scroll bars will appear that allow the user to move to the other parts of the website. While many users are used to scrolling websites in the vertical direction, horizontal scrolling can lead to a disjointed and unpleasant user experience when accessing the website.
One solution that has been used to alleviate resolution problems has been to create resolution-independent websites. Resolution-independent websites typically define the appearance and display of their content using relative conditions. For example, one unit of measurement that is used in Web design protocols and properties, such as cascading style sheets (CSS), and the like, is the “em.” The em is a unit of arbitrary resolution that is used as the design space of a digital font. Imaging systems work by scaling the em to a specified font size of an element or parent of an element in which the em unit is placed. For instance, within a first paragraph tag, the font size may be 12 points. Thus, the unit “1 em” within this paragraph element would be equivalent to 12 points. If this particular paragraph element inherits its font size attribute from a parent element of some sort, then the em unit will be set to the font size of that parent element. Thus, in the preceding example, even though the paragraph font size is 12 points, the parent element has a font size of 10 points. Therefore, the unit 1 em within that paragraph would now be equivalent to 10 points.
In addition to the em unit, CSS also provides the relative units of ex and px. Ex, which stands for x-height, refers to the distance between the baseline and the mean line in a particular typeface. This is typically the height of a small letter of the particular font. Thus, as with the em measurement, is relative to the current font size. Px, which stands for pixel, refers to the size of one pixel. Here, using px, instead of defining a size relative to a font, the size is being defined relative to the pixel size of the display device. Additionally, CSS allows to use percentages to define the size of certain objects, such as text. The percentages are also relative a current unit or measurement in the web page (e.g., 50% of the current size, 70%, 125%, or the like). Using these relative units of measurement, designers may not only define font size in a relative way, but also define other structural elements, such as margins, padding, line width, and the like, using relative units.
In addition to providing scalable text and web page structure using the relative units to define web object properties, resolution independent websites also account for image resizing. Web browsers are capable of resizing images. However, the resulting images, which are resized by the web browsers using the up-sampling and down-sampling described above, often become distorted and visually displeasing to the user. Resolution independent design attempts to address these issues in certain applications by providing a very high quality image file on the web server. When the dimensions of the target device and window are known, the web server applies a resizing process which produces much more favorable results to the resulting web page. The processing capabilities of a web server are typically much greater than a web browser. Thus, using a much more complex resizing algorithm will generally product much more favorable results when resizing the target elements to higher or lower resolutions. As different devices having different resolutions request the same image, the web server may also store those resized versions, such that, if another device requests the same image at the same resolution size, instead of processing the main image again, the stored, resized image is downloaded to the requesting device.
Resolution independent websites generally provide a more pleasing presentation that is maintained across various device sizes and resolutions. However, creating resolution independent websites or converting static websites into resolution independent websites is extremely time consuming and, therefore, costly. In order to create or convert resolution independent websites, web developers typically need to be very familiar with CSS programming and server-side script programming for controlling any image resizing activities that would be needed for scaling images. In converting existing, static web pages, developers would have to replace the absolute measurements with relative measurements, in addition to updating each call to an image for the web page. Moreover, web-optimized image files would be replaced with high quality image files. Therefore, novice users or designers would be effectively prevented from implementing such websites without expending considerable costs.